<!--
	作者：2575202388@qq.com
	时间：2018-10-19
	描述：公用表格组件
-->
<template>
	<div>
		<Table stripe size="small" @on-select="onselect" @on-select-all-cancel="onselectallcancel" @on-select-cancel="onselectcancel" @on-selection-change="getSelections" @on-select-all="onselectall" :height="height" :loading="loading" :columns="columns" :data="datalist">
			<Spin v-if="spin" fix slot="loading">
				<Icon type="md-aperture" size=30 class="rotate"></Icon>
				<div style="width: 100px;color: #515a6e;">{{loadmsg}}</div>
			</Spin>
		</Table>
		<div style="margin-top: 10px;float: right;margin-right: 30px;">
			<Defaultpage ref="page" v-if="adminpage" :columns="columns" :headerlist="headerlist" :defaultheader="defaultheader" :type="type" @pagechange="pagechange" @loading="loadinghanle" :paramiters="paramiters" :serverUrl="serverUrl"></Defaultpage>
			<Webpage v-if="!adminpage" :datas="datas" :renderBefor="renderBefor" ref="page" :type="type" @pagechange="pagechange" @loading="loadinghanle" :paramiters="paramiters" :serverUrl="serverUrl"></Webpage>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Tdtable",
		props: {
			headerlist: {
				type: Array,
				default: function() {
					return [];
				}
			},
			defaultheader: {
				type: Array,
				default: function() {
					return [];
				}
			},
			height: {
				type: String,
				default: "380"
			},
			columns: {
				type: Array,
				default: function() {
					return [];
				}
			},
			datas: {
				type: Array,
				default: function() {
					return [];
				}
			},
			serverUrl: {
				type: String,
				default: ""
			},
			adminpage: {
				type: Boolean,
				default: function() {
					return true;
				}
			},
			paramiters: {
				type: Object,
				default: function() {
					return {};
				}
			},
			renderBefor: {
				type: Function,
				default: function() {
					return null;
				}
			},
			renderBeforRow: {
				type: Function,
				default: function() {
					return null;
				}
			},
			loadmsg: {
				type: String,
				default: function() {
					return "加载中...";
				}
			},
			spin: {
				type: Boolean,
				default: function() {
					return true;
				}
			},
			type: {
				type: String,
				default: function() {
					return "post";
				}
			}
		},
		data() {
			return {
				datalist: [],
				loading: false,
				selectData: {}
			}
		},
		methods: {
			exportExcel(datas) {
				if(this.adminpage) {
					this.$refs.page.exportExcel(this.getselectDatas());
				}
			},
			onselect(data, row) {
				this.selectData = data;
			},
			onselectcancel(data, row) {
				this.selectData = data;
			},
			onselectall(datas) {
				datas.forEach((value, index) => {
					this.selectData[index] = datas[index];
				});
			},
			onselectallcancel() {
				this.selectData = {};
			},
			getSelections(selection, row) {
				this.$emit('getSelection', selection);
			},
			getselectDatas() {
				var list = [];
				Object.keys(this.selectData).forEach(key => {
					if(key) {
						list.push(this.selectData[key]);
					}
				});
				return list;
			},
			pagechange(datas) {
				this.datalist = [];
				var _datas = [];
				if(this.adminpage) {
					var _datastemp = this.renderBefor(datas);
					if(_datastemp) {
						_datas = _datastemp;
					}
				}
				_datas = datas.map((value, key) => {
					let newvalue = this.renderBeforRow(value, key);
					if(newvalue) {
						return newvalue;
					} else {
						return value;
					}
				})
				this.datalist = _datas;
			},
			loadinghanle(loading) {
				this.loading = loading;
			},
			load() {
				this.$refs.page.getdatas();
			},
		},
		mounted() {
			this.load();
		}
	}
</script>

<style>
	.ivu-table th {
		background-color: #f3f3f3;
		height: 40px;
	}
	
	.rotate {
		color: #515a6e;
		animation: ani-demo-spin .5s linear infinite;
	}
	
	@keyframes ani-demo-spin {
		from {
			transform: rotate(0deg);
		}
		50% {
			transform: rotate(180deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
</style>

<style>

</style>